<template>
  <div class="confirm-order">
    <!-- 头部 -->
    <NavigationBar title="确认订单"></NavigationBar>
    <div class="address" v-if="Object.keys(address).length>0" @click="gotoPage('my-address')">
      <img class="left" src="https://files.roborock.com/images_h5/image/default_address.png" alt="">
      <div class="center">
        <p>{{ address.name }} {{ address.mobile }}</p>
        <p>{{ address.regions.reduce((prev, item) => prev + item.name, '') }}</p>
      </div>
      <div class="right">
        <van-icon name="arrow"/>
      </div>
    </div>
    <div class="content" v-for="(item,index) in commodity_data" :key="index">
      <div class="item">
        <img class="left" :src="item.img" alt="">
        <div class="center">
          <p class="name">{{ item.name }}</p>
          <p class="price">￥{{ item.price }}</p>
        </div>
        <div class="right">x{{ item.num }}</div>
      </div>
    </div>
    <div class="down">
      <van-cell title="优惠券" is-link :to="{name:'coupon'}"/>
      <van-cell title="发票" is-link value="电子发票"/>
      <van-cell title="运费" is-link value="包邮"/>
      <van-field
        v-model="value"
        label="买家留言"
        right-icon="arrow"
        input-align="right"
        placeholder="选填，请先与客服协商"
      />
    </div>
    <div class="settlement">
      <p>
        <span>共 {{ commodity_data.reduce((prev, item) => prev + item.num, 0) }} 件</span>
        <span>小计:  {{ commodity_data.reduce((prev, item) => prev + (item.price * item.num), 0) }} 元</span>
      </p>
      <van-button @click="buy" round size="large" type="info">确认订单</van-button>
    </div>

    <!--    <div v-for="(item,index) in JSON.parse($route.query.data)" :key="index">-->
    <!--      <p>goods_id:{{ item.goods_id }}</p>-->
    <!--      <p>name:{{ item.name }}</p>-->
    <!--      <p>cat_id:{{ item.cat_id }}</p>-->
    <!--      <p>price:{{ item.price }}</p>-->
    <!--      <p>num: {{ item.num }}</p>-->
    <!--      <img :src="item.img" alt="">-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "ConfirmOrder",
  data() {
    return {
      value: '',
      commodity_data: [],
      address: {},
      isCart: false,
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    buy() {
      let data = {
        amount: this.commodity_data[0].num, //数量
        cashgift: 0,
        comment: "",
        consignee: this.address.id, //联系人id
        invoice_content: "",
        invoice_mode: 0,
        invoice_title: "",
        invoice_type: 0,
        product: this.commodity_data[0].goods_id, //商品id
        property: "[]",
        referer: "H5订单",
        score: 0,
        shipping: "",
        user_remarks: "",
      }
      // console.log(data)
      let cart = {
        cart_good_id: JSON.stringify(this.commodity_data.map(item => item.cart_good_id)), //商品id
        cashgift: 0,
        comment: "",
        consignee: this.address.id,//联系人id
        invoice_content: "",
        invoice_mode: 0,
        invoice_title: "",
        invoice_type: 0,
        referer: "H5订单",
        shipping: "",
        user_remarks: ""
      }
      // console.log(cart)

      if (this.isCart) {
        // console.log("购物车")
        this.$ajax.submitCartOrder(cart).then(res => {
          // console.log(res)
          if (res.error_code === 0) {
            this.$toast("订单提交成功")
          } else {
            this.$toast(res.error_desc)
          }
        })
      } else {
        // console.log("非购物车")
        this.$ajax.submitOrders(data).then(res => {
          if (res.error_code === 0) {
            this.$toast("订单提交成功")
          } else {
            this.$toast(res.error_desc)
          }
          // console.log(res)

        })
      }
    }
  },
// 生命周期
  created() {
    this.commodity_data = JSON.parse(this.$route.query.data)
    if (this.$route.query.isCart) {
      this.isCart = Boolean(this.$route.query.isCart)
    }

    this.$ajax.myAddress().then(res => {
      // console.log(res)
      if (res.error_code === 0) {
        if (res.consignees.length > 0) {
          this.address = res.consignees.filter(item => item.is_default)[0]
        } else {
          this.$toast("您还没有添加收货地址")
        }
      } else {
        this.$toast("获取地址失败")
      }
      // console.log(this.address)
    })
  },
  mounted() {
  },
  //  守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.vuexUserInfo.token) {
        return false
      } else {
        vm.$router.replace({
          name: 'login'
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.confirm-order {
  width: 100%;

  .address {
    box-sizing: border-box;
    border-top: 0.5px solid #e4e4e4;
    border-bottom: 0.5px solid #e4e4e4;
    margin: 0 20px 20px;
    width: calc(100% - 40px);
    padding: 20px 0;
    display: flex;
    align-items: center;

    img {
      height: 40px;
      width: 40px;
      margin-right: 20px;
    }

    .center {
      display: inline-block;
      box-sizing: border-box;
      flex: 1;
      color: #4a4a4a;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;

      p:last-child {
        font-size: 14px;
        margin-top: 5px;
        overflow: hidden;
        color: #4a4a4a;
        font-weight: 400;
        line-height: 20px;

      }
    }
  }

  .content {
    margin-top: 5px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .item {
      display: flex;
      width: 100%;
      padding: 15px 0;

      img {
        width: 30%;
        //height: 74px;
      }

      .center {
        flex: 1;
        padding-left: 20px;

        .name {
          font-size: 14px;
          color: #4a4a4a;
          line-height: 25px;
          margin-bottom: 5px;
        }

        .price {
          color: transparent;
          background-image: linear-gradient(90deg, #72b4fe, #3777f7);
          -webkit-background-clip: text;
        }
      }

      .right {
        color: #4a4a4a;
        font-size: 16px;
        line-height: 55px;
      }
    }
  }

  .down {
    margin-top: 30px;

    ::v-deep.van-cell {
      background-color: transparent;
      height: 60px;
    }
  }

  .settlement {
    position: fixed;
    padding: 20px 42px 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;

    p {
      text-align: center;
      width: 100%;
      font-size: 14px;
      color: #4a4a4a;
      margin-bottom: 16px;

      span:first-child {
        opacity: .5;
        margin-right: 10px;
      }
    }

    .van-button--info {
      background: linear-gradient(270deg, #3777f7, #72b4fe);
      height: 40px;
    }
  }

}
</style>